<template>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem">
        <template v-slot:actionCustom="scope">
            <el-button v-hasPermi="[$button.coursesaleedit || null]" link @click="editHandle(scope)" type="primary" size="small">修改</el-button>
            <el-button link @click="codeShowHandle(scope)" type="primary" size="small">查看邀请码</el-button>
            <el-button v-hasPermi="[$button.coursesaleresetPwd || null]" link @click="data.resetRow = scope.scope.scope.row, data.resetDialog = true" type="danger"
                size="small">重置密码</el-button>
        </template>
    </tablePaging>
    <el-dialog :title="data.HandleSaleType == 'add' ? '新增销售' : '编辑销售'" v-model="data.HandleSaleDialog"
        :before-close="formClear">
        <div>
            <el-form ref="formSale" :model="data.formAdd" :rules="data.formRules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input maxlength="20" class="item-input-width" v-model="data.formAdd.name" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input maxlength="11" @input="data.formAdd.mobile.length > 10 ? checkInputHandle('mobile') : ''"
                        class="item-input-width" v-model="data.formAdd.mobile" />
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input maxlength="20" @input="data.formAdd.idCard.length > 17 ? checkInputHandle('idCard') : ''"
                        class="item-input-width" v-model="data.formAdd.idCard" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer ">
                <el-button @click="formClear">
                    取消</el-button>
                <el-button type="primary" @click="confirmHandleSale">
                    确 定</el-button>
            </span>
        </template>
    </el-dialog>
    <div class="sharing-code-dialog">
        <el-dialog :show-close="false" style="width: 480px;" title="" v-model="data.sharingCodeDialog">
            <div style="position: relative;">
                <div class="sharing-code-content">
                    <div style="text-align: center;border-bottom: 1px dashed #707070;width: 350px;padding-bottom: 35px;">
                        <span style="color: #303133 ;">推荐更多用户 获得</span><span>更多佣金</span>
                    </div>
<!--                    <div style="margin-top: 26px;font-size: 16px;font-family: PingFang SC;font-weight: bold;">-->
<!--                        编号:{{ data.codeNum }}</div>-->
                    <img style="width: 220px;height: 220px;margin:10px 0 30px  0;" :src="data.codeShowUrl" alt="">
                    <el-button @click="downCodeHandle" type="primary">
                        <el-icon>
                            <Download />
                        </el-icon>
                        下载邀请码
                    </el-button>
                </div>
                <img src="@/assets/images/share-code.png">
            </div>
        </el-dialog>
    </div>
    <el-dialog :show-close="false" title="重置密码" v-model="data.resetDialog">
        <div style="font-size: 13px;font-family: PingFang SC;color: #303133;text-align: center;"> 是否确定重置
            <span style="color:#409EFF"> {{ data.resetRow.name }} </span>
            的登录密码?重置后密码为手机号后六位
        </div>
        <template #footer>
            <span class="dialog-footer ">
                <el-button type="primary" @click="resettingPassword">
                    确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch, reactive, getCurrentInstance, onMounted } from "vue"
import tablePaging from '@/views/common/component/table-paging'
import { ElMessage, ElMessageBox } from 'element-plus'
import {tableItem, operationItem, resetApi, updateApi, addApi, getCodeUrlApi} from './const.js'
import { isIdentityCard, isMobile } from '@/utils/checkInput'
import $button from '@/button'
const data = reactive({
    resetDialog: false,
    HandleSaleDialog: false,
    resetRow: {},
    codeShowUrl: '',
    codeNum: '',
    HandleSaleType: 'add',
    sharingCodeDialog: false,
    formAdd: {
        name: '',
        mobile: '',
        idCard: '',
        id: ''
    },
    formRules:
    {
        name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 1, max: 20, message: '', trigger: 'blur' },
        ],
        mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 1, max: 11, message: '', trigger: 'blur' },
        ],
        idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 1, max: 20, message: '', trigger: 'blur' },
        ],
    }

})
const formSale = ref(null)
onMounted(() => {
    operationItem.menuArray[0].handle = () => {
        data.HandleSaleType = 'add'
        for (const key in data.formAdd) {
            data.formAdd[key] = null
        }
        data.HandleSaleDialog = true
    }
})
const checkInputHandle = (type) => {
    let result = false
    switch (type) {
        case 'idCard':
            result = isIdentityCard(data.formAdd.idCard)
            if (!isIdentityCard(data.formAdd.idCard)) {
                ElMessage.warning('身份证有误，请重新输入')
            }
            ; break;
        case 'mobile':
            result = isMobile(data.formAdd.mobile)
            if (!isMobile(data.formAdd.mobile)) {
                ElMessage.warning('手机号有误，请重新输入')
            }
            ; break;
    }
    return result
}
const editHandle = (res) => {
    const scope = res.scope.scope || {}
    for (const key in data.formAdd) {
        data.formAdd[key] = scope.row[key] || ''
    }
    data.HandleSaleType = 'edit'; data.HandleSaleDialog = true
}
const codeShowHandle = (item) => {
    const scope = item.scope.scope || {}
    data.codeNum = scope.row.num || ''
    getCodeUrlApi(scope.row.id).then((res) => {
      data.codeShowUrl = res.msg || ''
    })
    data.sharingCodeDialog = true
}
const formClear = () => {
    formSale.value.resetFields()
    data.HandleSaleDialog = false
}
const downCodeHandle = () => {
    location.href = data.codeShowUrl
}
const confirmHandleSale = () => {
    formSale.value.validate((valid, fields) => {
        if (!valid) { return }
        if (!checkInputHandle('mobile')) { return }
        if (!checkInputHandle('idCard')) { return }
        if (data.HandleSaleType == 'add') {
            addApi({ "typeCode": "root", "disabledFlag": 0, ...data.formAdd }).then(() => {
                data.HandleSaleDialog = false
                ElMessage.success('添加成功')
                tableItem.pageInfo.paging()
            })
        } else {
            updateApi(data.formAdd).then(() => {
                data.HandleSaleDialog = false
                tableItem.pageInfo.paging()
                ElMessage.success('修改成功')
            })
        }
    })
}
const resettingPassword = () => {
    resetApi(data.resetRow.id).then((res) => { ElMessage.success('密码重置成功'); data.resetDialog = false }).catch(() => {
        data.resetDialog.false
    })
}
</script>
<style lang="scss">
.sharing-code-dialog {
    .el-dialog__body {
        padding: 0;
        height: 0;
    }

    .el-dialog__header {
        padding: 0;
        border-radius: 20px;
    }
}
</style>
<style lang="scss" scoped>
.item-input-width {
    width: 785px;
}

.sharing-code-content {
    color: #409EFF;
    padding: 30px;
    font-size: 14px;
    font-family: DingTalk JinBuTi;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50px;
    left: 40px;
    width: 400px;
    height: 458px;
}
</style>
